@use '@/assets/styles/element/index.scss' as *;
@use '@/assets/styles/element/dark.scss' as *;

::-webkit-scrollbar {
  width: 13px;
  height: 13px;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(0 0 0 / 40%);
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 7px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgb(0 0 0 / 50%);
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-track:hover {
  background-color: #f8fafc;
}

html,
body {
  height: 100%;
}

body {
  box-sizing: border-box;
  margin: 0;
  font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: #333;
  -webkit-tap-highlight-color: transparent;

  &.hidden {
    overflow: hidden;
  }
}

#app {
  @include themeify {
    background-color: themed('g-app-bg');
  }
}

* {
  box-sizing: inherit;
}

// 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
[data-fixed-calc-width] {
  position: fixed;
  right: 0;
  left: 50%;
}

[data-app-width-mode='adaption'],
[data-app-width-mode='adaption-min-width'] {
  [data-fixed-calc-width] {
    width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
    transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2))
      translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
  }
}

[data-app-width-mode='center'],
[data-app-width-mode='center-max-width'] {
  @media screen and (max-width: $g-app-width) {
    [data-fixed-calc-width] {
      width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
      transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2))
        translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
    }
  }

  [data-fixed-calc-width] {
    width: calc(
      #{$g-app-width} - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width)
    );
    transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2))
      translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
  }
}

[data-mode='mobile'] {
  [data-fixed-calc-width] {
    width: 100% !important;
    transform: translateX(-50%) !important;
  }
}

// remix icon
[class^='ri-'],
[class*=' ri-'] {
  display: inline-block;
  font-weight: 400;
  font-variant: normal;
  line-height: 1;
  text-transform: none;
  vertical-align: bottom;
}

.el-button [class*='ri-'] + span {
  margin-left: 5px;
}

// textarea 字体跟随系统
textarea {
  font-family: inherit;
}

// 列表页全局样式
.el-table.list-table {
  margin: 20px 0;

  .el-button + .el-dropdown {
    margin-left: 10px;
  }
}

.el-menu {
  @include themeify {
    background-color: themed('g-sub-sidebar-bg');
  }

  .el-menu--inline {
    @include themeify {
      background-color: themed('g-sub-sidebar-bg') !important;
    }

    .el-menu-item,
    .el-sub-menu > .el-sub-menu__title {
      @include themeify {
        color: themed('g-sub-sidebar-menu-color');
        background-color: themed('g-sub-sidebar-bg') !important;
      }

      &:hover {
        @include themeify {
          color: themed('g-sub-sidebar-menu-hover-color') !important;
          background-color: themed('g-sub-sidebar-menu-hover-bg') !important;
        }
      }
    }
  }
}

.el-menu-item,
.el-sub-menu__title {
  @include themeify {
    min-width: auto;
    color: themed('g-sub-sidebar-menu-color') !important;
    background: transparent !important;
  }

  &:hover {
    @include themeify {
      color: themed('g-sub-sidebar-menu-hover-color') !important;
      background-color: themed('g-sub-sidebar-menu-hover-bg') !important;
    }
  }

  i,
  .icon,
  .el-sub-menu__icon-arrow {
    color: unset;
  }
}

.el-menu-item.is-active,
.el-menu--collapse .el-sub-menu.is-active > .el-sub-menu__title,
.el-popper .el-sub-menu.is-active > .el-sub-menu__title,
.el-sub-menu .el-menu--inline .el-menu-item.is-active {
  @include themeify {
    color: themed('g-sub-sidebar-menu-active-color') !important;
    background-color: themed('g-sub-sidebar-menu-active-bg') !important;
  }

  i,
  .icon,
  .el-sub-menu__icon-arrow {
    color: unset;
  }
}

.el-popper {
  > .el-menu--vertical,
  > .el-menu--horizontal {
    max-width: 200px;

    .el-menu--popup {
      @include themeify {
        background-color: themed('g-sub-sidebar-bg') !important;
      }
    }
  }
}

.park-icon {
  color: var(--icon-fill-color);
}
